<template>
	<view class="">
		<view class="main-wrap" :class="{show: loaded}">
			<view class="back-top" :style="{opacity}" @tap="userClickTopIcon">
				<view class="" :style="{height}"></view>
				<view class="back-icon-con row ">
					<view class="one-icon"><u-icon :name="topIconName" color="#ffffff" size="44"></u-icon></view>
				</view>
			</view>
			<view class="back-top" :style="{opacity: 1 - opacity, background: '#fff'}" @tap="userClickTopIcon">
				<view class="" :style="{height}"></view>
				<view class="back-icon-con row ">
					<view class="one-icon" style="background: #FFFFFF;"><u-icon :name="topIconName" color="#333" size="44"></u-icon></view>
					<view class="back-top-title">详情</view>
				</view>
			</view>
			<view class="swiper-con" style="position: relative;">
				<swiper autoplay circular @change="swiperChange" >
					<swiper-item class="swiperItem" v-for="(item, index) in dataInfo.pic" :key="index"  >
						<view class="swiperImg" @tap="userSeeBig">
							<image :src="item" class="swiperImg" ></image>
						</view>	
					</swiper-item>
				</swiper>
				<view class="swiper-num">{{ current }}/{{ swiperLen }}</view>
			</view>
			<view class="good-info">
				<view class="item-con">
					<view class="row between">
						<view class="" style="width: 90%;">
							<view class="goods-price">{{ dataInfo.price }}</view>
							<view class="goods-name">{{ dataInfo.name }}</view>
						</view>
						<view class="share-con column center" @tap="onShareClick">
							<image src="/static/img/fenxiang.png" mode="" class="share-icon"></image>
							<view class="share-txt">分享</view>
							<button open-type="share" class="share-btn" v-if="canShare"></button>
						</view>
					</view>
				</view>
				<view class="row item-con goods-s">
					<text class="f-t">运费：</text>
					<view class="row" v-if="dataInfo.freight == 0 || !dataInfo.freight">
						<image src="/static/img/wa.png" mode="" class="mian-icon"></image>
						<text class="f-m">全国包邮</text>
					</view>
					<view class="" v-else>
						<text class="f-m">{{ dataInfo.freight }}</text>
					</view>
				</view>
				<view class="item-con">
					<view class="goods-details-title">商品详情</view>
					<view style="padding: 20upx 0;"><jyf-parser :html="dataInfo.detail"></jyf-parser></view>
				</view>
			</view>
			<uni-goods-nav ref="uniGoodsNav" :item="dataInfo" @itemonClick="itemOnClick" @buttonClick="buttonClick"></uni-goods-nav>
		</view>

		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
import uniGoodsNav from "@/components/uni-goods-nav/goods-nav.vue";
import jyfParser from "@/components/jyf-parser/jyf-parser.vue";
export default {
	components: {
		uniGoodsNav,
		jyfParser
	},
	data() {
		return {
			id: "",
			opacity: 1,
			dataInfo: {},
			current: 1,
			height: uni.getSystemInfoSync().statusBarHeight + "px",
			showBtn: false,
			topIconName: "nav-back",
			canShare:false
		};
	},
	computed: {
		swiperLen() {
			return this.dataInfo.pic ? this.dataInfo.pic.length : 0;
		},
		hasProvice() {
			const pages = getCurrentPages();
			let flag = true;
			if (pages.length == 1) {
				flag = false;
				this.topIconName = "home";
			}
			return flag;
		}
	},
	onShow() {
		if (uni.getStorageSync("uid")) {
			this.canShare = true;
		}
		if (!this.canShare) {
			uni.hideShareMenu({
				menus: ["shareAppMessage"]
			});
		} else {
			uni.showShareMenu({
				menus: ["shareAppMessage"]
			});
		}
		this.loadData();
		this.$nextTick(() => {
			this.$refs.uniGoodsNav.getUserCart();
		});
	},
	onLoad(options) {
		if (options.inviteId) {
			getApp().globalData.inviteId = options.inviteId;
		}
		this.id = options.id;
	},
	onPageScroll(e) {
		if (e.scrollTop < 150) {
			this.opacity = 1 - e.scrollTop / 150;
		} else {
			this.opacity = 0;
		}
	},
	onShareAppMessage() {
		return {
			path: `/pages/details/goodDetails?id=${this.dataInfo.id}&inviteId=${uni.getStorageSync("uid")}`
		};
	},
	methods: {
		userSeeBig(index) {
			let array = this.dataInfo.pic;
			uni.previewImage({
				current: array[index],
				urls: array
			});
		},
		userClickTopIcon() {
			if (this.hasProvice) {
				this.back();
			} else {
				uni.switchTab({
					url: `/pages/tabs/home`
				});
			}
		},
		onShareClick() {
			if (!this.canShare) {
				this.navTo("/pages/public/author");
			}
		},
		swiperChange(e) {
			this.current = e.detail.current + 1;
		},
		async loadData() {
			const data={
				id: this.id,
				uid:uni.getStorageSync('uid')
			}
			const res = await this.$request("goods/goods-detail", data);
			if (res.result == 0) {
				res.data.pic = res.data.pic.split("|");
				this.dataInfo = res.data;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		buttonClick(e) {
			if (!uni.getStorageSync("uid")) {
				this.navTo("/pages/public/author");
				return;
			}

			if (this.dataInfo.goodsStatus == 0) {
				if (e.index == 0) {
					this.userAddCart();
				} else {
					this.getCreatOrderData();
				}
			} else {
				this.$util.msg("该商品已售罄!下次早点来哦~");
			}
		},
		getCreatOrderData() {
			let array = new Array(),
				dataInfo = new Object();
			this.$set(array, 0, this.dataInfo);
			dataInfo.type = 0;
			dataInfo.list = array;
			getApp().globalData.creatOrderDataInfo = dataInfo;
			this.navTo("/pages/order/buyInvert");
		},
		itemOnClick(e) {
			if (!uni.getStorageSync("uid")) {
				this.navTo("/pages/public/author");
				return;
			}
			if (e.index == 0) {
				let isCollect = this.dataInfo.isCollect;
				if (isCollect == 0) {
					this.userStoreGoods();
				} else {
					this.userCancleGoods();
				}
			} else if (e.index == 1) {
				this.navTo("/pages/public/serveList");
			} else {
				uni.switchTab({
					url: "/pages/tabs/cart"
				});
			}
		},
		// 收藏
		async userStoreGoods() {
			const data = {
				uid: uni.getStorageSync("uid"),
				id: this.id
			};
			const res = await this.$request("goods/collect", data, {showLoading: true});
			if (res.result == 0) {
				this.$util.msg("收藏成功!");
				this.dataInfo.isCollect = 1;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		//   取消收藏
		async userCancleGoods() {
			const data = {
				uid: uni.getStorageSync("uid"),
				ids: this.id
			};
			const res = await this.$request("goods/collect-del", data, {showLoading: true});
			if (res.result == 0) {
				this.dataInfo.isCollect = 0;
				this.$util.msg("取消收藏成功！");
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		//  加入购物车
		async userAddCart() {
			const data = {
				uid: uni.getStorageSync("uid"),
				id: this.id
			};
			const res = await this.$request("goods/cart-add", data, {showLoading: true});
			if (res.result == 0) {
				this.$util.msg("加入购物车成功！");
				this.$refs.uniGoodsNav.getUserCart();
			} else {
				this.$util.msg(res.resultNote);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.one-icon {
	// width: 66upx;
	// height: 66upx;
	background: rgba(94, 94, 94, 1);
	border-radius: 50%;
	padding: 10upx;
}
.f-t {
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
}
.f-m {
	font-size: 22upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
	padding-left: 4upx;
}
.back-top {
	position: fixed;
	top: 0;
	z-index: 99999;
	left: 0;
	width: 100%;
	transition: all 0.6s;
}
.back-icon-con {
	height: 44px;
	padding-left: 24upx;
	position: relative;
}
.back-top-title {
	height: 44px;
	line-height: 44px;
	// margin-right: 94px;
	width: 250rpx;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	font-size: 32upx;
	color: #606266;
}
swiper,
.swiperItem,
.swiperImg {
	width: 750upx;
	height: 750upx;
}
.swiper-num {
	position: absolute;
	right: 0;
	bottom: 160upx;
	width: 122upx;
	height: 42upx;
	text-align: center;
	line-height: 42upx;
	background: #000000;
	opacity: 0.6;
	border-radius: 21upx 0px 0px 21upx;
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
}
.good-info {
	// margin-top: -100upx;
	padding-bottom: 80px;
	background: #ffffff;
	border-radius: 30upx;
	position: absolute;
	top: 700upx;
	width: 100%;
}
.item-con {
	padding: 30upx 20upx;
}
.goods-price {
	font-size: 46upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #cb1414;
}
.goods-price::before {
	content: "￥";
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #cb1414;
}
.goods-name {
	font-size: 30upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
	font-weight: bold;
	line-height: 56upx;
}
.goods-s {
	border-top: 10upx solid #f6f6f6;
	border-bottom: 10upx solid #f6f6f6;
}
.share-con {
	position: relative;
}
.share-txt {
	font-size: 22upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #5c5c5c;
	line-height: 41upx;
}
.share-icon {
	width: 36upx;
	height: 36upx;
}
.share-btn {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
}
.mian-icon {
	width: 24upx;
	height: 24upx;
}
.goods-details-title {
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
	line-height: 36upx;
	padding-bottom: 20upx;
	position: relative;
}
.goods-details-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 86upx;
	height: 1px;
	background: #cb1414;
}
</style>
